<template>
  <div class="main">
    <!-- 面包屑导航 -->
    <div style="margin-top: 5px">
      <a href="#" @click="checksy">首页</a>
      &nbsp;
      <van-icon name="arrow" />
      &nbsp;
      <a href="#">定位</a>
    </div>
    <h3 style="margin: 20px 0">定位服务</h3>
    <div style="display: flex">
      <p>查找门店</p>
      <input
        class="search"
        v-model="store"
        type="text"
        placeholder="请选择或输入您的查询条件"
      />
    </div>
    <!-- <div style="display:flex;  justify-content: flex-end;">
            <button style="margin:10px 0;" class="search2">搜索</button> 
        </div> -->

    <hr color="#000" style="margin: 10px 0 20px 0" />
    <p>按省市区查询</p>
    <input
      v-model="locale"
      class="search"
      type="text"
      style="
        border: 1px solid black;
        width: 100%;
        height: 40px;
        margin: 10px 0; ;
      "
    />
    <button @click="getlocale2">搜索</button>
    <p>目前您的位置</p>
    <hr color="#000" style="margin: 10px 0" />
    <div>
      <span style="margin: 10px 0">
        <van-icon name="location" style="margin: 20px 0" />
        {{ autolocation }}
      </span>
    </div>
    <!-- <button>查看详情</button> -->
    <!-- 地图 -->
    <div class="map">
      <div>
        <span @click="getlocale1" :class="{ active: n == 0 }">地图</span>
      </div>
      <div>
        <span @click="getlocale2" :class="{ active: n == 1 }">列表</span>
      </div>
    </div>
    <template style="margin: 15px 0 20px 0" v-if="address[1]">
      <br>
      <div v-show="n == 1" id="add" v-for="i in address[1]" :key="i.id">
        <van-icon name="location" size="20" />
        <span style="font-size: 18px;" >{{ i.name }}</span>
        <br>
        <p style="font-size: 18px;" >地址:{{ i.address }}</p>
      </div>
    </template>
    <br />
    <br />
    <div v-show="n == 0">
      <template>
        <div id="container"></div>
      </template>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import store from "@/store";
// import { months } from 'moment';
window._AMapSecurityConfig = {
  securityJsCode: "bef5670bb52150f65158c191dc641138",
};
export default {
  data() {
    return {
      store: "",
      locale: "",
      autolocation: "",
      n: 0,
      address: [],
      lat: 106.5507,
      lng: 29.5647,
    };
  },
  watch: {
    store() {
      this.getplace();
    },
    locale() {
      this.getplace();
    },
    n() {
      this.getplace();
    },
  },
  mounted() {
    this.getplace();
  },
  methods: {
    // 回到首页
    checksy() {
      this.$router.push("/");
    },
    getplace() {
      // DOM初始化完成进行地图初始化
      AMapLoader.load({
        key: "1f26317bf46ec1395d8faa3d11049800", // 申请好的Web端开发者Key
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          "AMap.CitySearch",
          "AMap.PlaceSearch",
          "AMap.Geocoder",
        ],
      }).then((AMap) => {
        const _this = this;
        //将地图显示在#contaier的div中
        let map = new AMap.Map("container", {
          // center: [106.5507,29.5647],//中心点坐标
          center: [_this.lat, _this.lng],
          // center: [116.343328,39.949901],
          zoom: 14,
          dragEnable: true,
        });
        //添加一个点标记
        let marker = new AMap.Marker({
          position: [_this.lat, _this.lng],
        });
        map.add(marker);

        // 获取定位
        map.plugin("AMap.CitySearch", function () {
          var citySearch = new AMap.CitySearch();
          citySearch.getLocalCity(function (status, result) {
            if (status === "complete" && result.info === "OK") {
              // 查询成功，result即为当前所在城市信息
              // console.log('通过ip获取当前城市：', result)
              // console.log(result.city)
              _this.autolocation = result.city;
              console.log(_this.autolocation);
              //转换
              AMap.plugin("AMap.Geocoder", function () {
                var geocoder = new AMap.Geocoder({
                  // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                  city: _this.autolocation,
                });

                geocoder.getLocation(
                  _this.autolocation,
                  function (status, result) {
                    if (status === "complete" && result.info === "OK") {
                      // result中对应详细地理坐标信息
                      // console.log("返回值",result);
                      let map = result.geocoder[0].location;
                      console.log("不知道是什么", result.geocoder[0].location);
                      _this.lat = map.lat;
                      _this.lng = map.lng;
                    }
                  }
                );
              });
              //获取查找门店
              AMap.plugin("AMap.PlaceSearch", function () {
                let searchObj = new AMap.PlaceSearch({
                  city: _this.locale,
                  // pageSize: 10, //每页结果数,默认10
                  // pageIndex: 1, //请求页码，默认1
                });

                searchObj.search(_this.store, function (status, result) {
                  // console.log(_this.locale),
                  console.log("门店", status, result);npois
                  _this.address.push(result.poiList.pois);
                  // console.log(_this.address[1],"1");
                });
              });
            }
          });
        });
      });
    },
    getlocale1() {
      this.n = 0;
    },
    getlocale2() {
      this.n = 1;
    },
  },
  updated() {
    console.log(this.lat);
    console.log(this.lng);
    this.n;
    this.lat;
    this.lng;
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin: 0 10px;
  color: black;
  P {
    font-weight: 700;
    margin: 0 10px 0 0;
    color: #000;
  }
  .search {
    border: none;
    background-color: #f5f5f5;
  }
  button {
    border: none;
    background-color: black;
    color: #f5f5f5;
    font-size: 17px;
    width: 110px;
    height: 40px;
    margin-bottom: 30px;
  }
  .map {
    display: flex;

    span {
      color: black;
      border: 1px solid black;
      padding: 10px 73.7px;
      margin-top: 20px;

      &.active {
        color: white;
        background-color: #000;
      }
    }
  }
  #container {
    // padding:10px;
    margin: 20px 0;
    width: 100%;
    height: 400px;
   
  }
}
</style>